<template>
    <div class="zichan">
        <!-- <ziHead :ishead="ishead" @toggleMode="toggleMode"></ziHead> -->
        <div class="zicontent">
            <div class="cbone">
                <span class="cbtit">提币</span>
                <div class="cbfrom">
                    <span class="chongxuan">选择您需要提取的币种</span>
                    <div class="chongselect">
                        <el-select v-model="value" style="width: 100%;" placeholder="请选择">
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <span class="xinxi">请确保充币平台支持您所选择的 USDT 网络，否则将会造成资产损失</span>
                    <span class="chongxuan">USDT地址/域名</span>
                    <div class="chongselect">
                        <el-input
                        placeholder="请输入内容"
                        v-model="keyword"
                        clearable>
                        </el-input>
                    </div>
                    <span class="chongxuan">USDT可用的提币网络</span>
                    <div class="chongselect">
                        <el-select v-model="valuetwo" style="width: 100%;" placeholder="请选择">
                            <el-option
                            v-for="item in optionstwo"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </div>

                    <span class="chongxuan">数量</span>
                    <div class="chongselect">
                        <el-input
                        placeholder="最小提币额：2"
                        v-model="keyword"
                        >
                        </el-input>
                        <div class="rightview">
                            <span class="uname">USDT | </span>
                            <span class="uquanbu">全部</span>
                        </div>
                    </div>
                    <span class="keyong">可用：0.002545 USDT</span>

                    <span class="chongxuan">手续费</span>
                    <div class="chongselect">
                        <el-input
                        placeholder="请输入"
                        v-model="keyword"
                        >
                        </el-input>
                        <div class="rightview">
                            <span class="uname">USDT</span>
                        </div>
                    </div>

                    <div class="daozhang">
                        <div class="daoone">
                            <span class="daoonename">到账数量</span>
                            <span class="usdright">0 USDT</span>
                        </div>
                        <div class="tijiao" @click="dialogVisible=true">提交</div>
                    </div>

                </div>
               
            </div>

            <div class="zitwo">
                <div class="zitwotit">
                    <span class="jitit">提币记录</span>
                    <span class="jilu">查看历史记录</span>
                </div>
                <div class="ztlist">
                    <div class="zthead">
                        <div class="zones">
                            <span class="rentit">时间</span>
                        </div>
                        <div class="zones" style="width: 25%;">
                            <span class="rentit">充币地址</span>
                        </div>
                        <div class="zones">
                            <span class="rentit">币种</span>
                        </div>
                        <div class="zones">
                            <span class="rentit">提币数量</span>
                        </div>
                        <div class="zones end">
                            <span class="rentit">手续费</span>
                        </div>
                        <div class="zones end">
                            <span class="rentit">提币状态</span>
                        </div>

                    </div>
                    <div class="zthead ztitems">
                        <div class="zones">
                            <span class="rentit">2023/10/27 0022:59</span>
                        </div>
                        <div class="zones" style="width: 25%;">
                            <!-- TBpoCCJn3w44yceeLx66ZzKGfq2NXLgZiYTBpoCCJn3w44yceeLx66ZzKGfq2NXLgZiY -->
                            <div class="rentit">TBpoCCJn3w44yceeLx6 6ZzKGfq2NXLg
                                <img src="@/assets/img/addition/copy.png" alt="" class="copy"/>
                            </div>
                        </div>
                        <div class="zones">
                            <span class="rentit">USDT</span>
                        </div>
                        <div class="zones">
                            <span class="rentit">12.001</span>
                        </div>
                        <div class="zones end">
                            <span class="rentit">0.001</span>
                        </div>
                        <div class="zones end">
                            <span class="rentit">已转入</span>
                        </div>
                    </div>
                    
                </div>
            </div>
             <!-- 提币弹窗 -->
            <el-dialog
                v-model="dialogVisible"
                width="30%"
                top="30vh"
                :before-close="handleClose"
                :show-close="false"
                class="dialogClass">
                <div class="popone">
                    <div class="pophead">
                        <img src="@/assets/img/addition/gantan.png" alt="" class="gantan" />
                        <span class="pname">此地址只能充入 Tether(USDT)</span>
                    </div>
                    <span class="wuname">请勿充入其他币种，否则您充入的资产将无法找回</span>
                    <div class="pophead" @click="istixing = !istixing">
                        <img src="@/assets/img/addition/gou.png" alt="" class="gou" v-if="!istixing"/>
                        <img src="@/assets/img/addition/gous.png" alt="" class="gou" v-if="istixing"/>
                        <span class="tixing">不再提醒</span>
                    </div>
                    <div class="zhixiao" @click="dialogVisible=false">我已知晓</div>
                </div>
            </el-dialog>
            <!-- 提币弹窗结束 -->
        </div>
       
    </div>
</template>
  
<script>
import { ref } from 'vue';
import Meun from "@/components/menu/meun.vue";
import ziHead from '@/views/property/components/ziHead.vue';
// import { tr } from 'element-plus/es/locale';
export default {
    name: "Invest",
    components: { ziHead },
    data() {
        return {
            modal1: false,
            ishead:1,
            iseye:false,
            istixing:false,
            
            keyword:'',
            dialogVisible:false,
        };
    },
    mounted() {
        // autofit.init({
        //   dh: 950,
        //   dw: 1200,
        //   el: "#app",
        //   resize: true
        // });
        // let devicewidth = document.documentElement.clientWidth//获取当前分辨率下的可是区域宽度
        //   let scale = devicewidth / 1920 // 分母——设计稿的尺寸
        //   document.body.style.zoom = scale//放大缩小相应倍数
        // },
    },
    setup() {
    },
    methods:{
        toggleMode(e){
            // console.log(e)
            this.ishead = e
        },
        istouClick(e){
            this.istou = e
        }
    }
};
//   const ishead = ref('0');
//   const toggleMode = (e) => {
//     ishead.value = e;
//   };
</script>
  
<style lang="scss" scoped>
.zicontent{
    padding: 20px 20%;
    display: flex;
    flex-direction: column;
    
    .cbone{
        display: flex;
        flex-direction: column;
        margin-bottom: 50px;
        .cbtit{
            display: block;
            font-size: 24px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #000000;
            margin-bottom: 10px;
           
        }
        .cbfrom{
            display: flex;
            flex-direction: column;
            .chongxuan{
                font-size: 15px;
                font-family: Source Han Sans CN;
                font-weight: 500;
                color: #000000;
                display: block;
                margin-bottom: 20px;
                margin-top: 20px;
            }
            .chongselect{
                width: 50%;
                position: relative;
            }
            .xinxi{
                font-size: 12px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #000000;
                display: block;
                margin-top: 14px;
                // margin-bottom: 10px;
            }
            .rightview{
                position: absolute;
                right: 10px;
                top: 6px;
                display: flex;
                flex-direction: row;
                align-items: center;
                .uname{
                    font-size: 14px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #000000;
                }
                .uquanbu{
                    display: inline-block;
                    margin-left: 5px;
                    color: #3976E4;
                    cursor: pointer;
                    z-index: 10;
                }
            }
            .keyong{
                font-size: 12px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #000000;
                display: block;
                margin-left: 5px;
                margin-top: 9px;
            }

            .daozhang{
                display: flex;
                flex-direction: column;
                width: 50%;
                margin-top: 50px;
                .daoone{
                    display: flex;
                    flex-direction: row;
                  
                    .daoonename{
                        font-size: 16px;
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: #000000;
                    }
                    .usdright{
                        margin-left: auto;
                        font-size: 16px;
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: #000000;
                    }
                }
                .tijiao{
                    height: 45px;
                    background: #000000;
                    border-radius: 22px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 16px;
                    font-family: Source Han Sans CN;
                    font-weight: 500;
                    color: #FFFFFF;
                    width: 100%;
                    margin-top: 30px;
                    cursor: pointer;
                }
            }
        }
        .saoma{
            display: flex;
            flex-direction: column;
            margin-top: 50px;
            .saotit{
                font-size: 12px;
                font-family: Source Han Sans CN;
                font-weight: 500;
                color: #000000;
            }
            .saomiao{
                display: flex;
                margin-top: 14px;
                span{
                    background: #F7F7F7;
                    border-radius: 3px;
                    padding: 16px 22px ;
                    display: inline-block;
                }
                
            }
        }
        .chongdi{
            display: flex;
            flex-direction: row;
            margin-top: 22px;
            .chongleft{
                width: 45%;    
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                .saotit{
                    font-size: 12px;
                    font-family: Source Han Sans CN;
                    font-weight: 500;
                    color: #000000;
                }
                .cltit{
                    background: #F7F7F7;
                    border-radius: 3px;
                    padding: 16px 22px;
                    margin-top: 14px;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    .clleft{
                        width: 50%;
                        display: flex;
                        flex-direction: row;

                    }
                    .copy{
                        width: 10px;
                        height: 10px;
                        margin-left: 10px;
                    }
                    .diname{
                        font-size: 12px;
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: #000000;
                        display: inline;
                    }
                    .dizhi{
                        margin-left: auto;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        .tu{
                           width: 70px;
                           height: 70px; 
                        }
                        .dinametwo{
                            font-size: 12px;
                            font-family: Source Han Sans CN;
                            font-weight: 400;
                            color: #000000;
                            display: inline-block;
                            margin-top: 5px;
                        }
                    }

                }
            }
            .chongright{
                width: 45%;
                margin-left: auto;
                padding: 25px 15px;
                background: #F7F7F7;
                border-radius: 7px;
                .chongitems{
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    margin-bottom: 14px;
                    font-size: 12px;
                    font-family: Source Han Sans CN;
                    font-weight: 500;
                    color: #8B8B8B;
                    .cnames{
                        font-size: 12px;
                        font-family: Source Han Sans CN;
                        font-weight: 500;
                        color: #8B8B8B;
                    }
                    .cval{
                        margin-left: auto;
                        font-size: 12px;
                        font-family: Source Han Sans CN;
                        font-weight: 500;
                        color: #000000;
                    }
                }
                .chongitems:last-child{
                    margin-bottom: 0;
                }
            }
        }
    }

    .zitwo{
        // border: 1px solid #EEEEEE;
        border-radius: 3px;
        margin-top: 27px;
        .zitwotit{
            // font-size: 16px;
            // font-family: Source Han Sans CN;
            // font-weight: 400;
            // color: #000000;
            // // margin: 15px 0;
            // // padding: 15px 24px;
            // border-bottom: 1px solid #EEEEEE;
            // display: flex;
            // flex-direction: row;
           
            // margin: 15px 0;
            padding: 15px 0px;
            border-bottom: 1px solid #EEEEEE;
            display: flex;
            flex-direction: row;
            align-items: center;
            .jitit{
                font-size: 16px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #000000;
            }
            .jilu{
                margin-left: auto;
                font-size: 12px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #3976E4;
                cursor: pointer;
            }
            .ztwoitems{
                height: 100%;
                margin-right: 30px;
                font-size: 15px;
                font-family: Source Han Sans CN;
                font-weight: 500;
                color: #999999;
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
                padding: 16px 0;
                cursor: pointer;
            }
            .renxian{
                position: absolute;
                width: 100%;
                bottom: 0;
                left: 0;
                height: 1px;
                background: #030000;
                display: none;
            }

            .ztacitve{
                font-weight: 500;
                color: #000000;
                .renxian{
                    display: inline-block;

                }
            }
        }
        .ztlist{
            // padding:0 15px;
            padding: 30px 0;
            .zthead{
                display: flex;
                flex-direction: row;
                margin-bottom: 38px;
                .zones{
                    width: 15%;
                    // display: flex;
                    // flex-direction: row;
                    display: inline-block;
                    padding: 0 8px 0 0;
                }
                .zonetwos{
                    width: 12.5%;
                    display: flex;
                    flex-direction: row;
                }
                .end{
                    justify-content: flex-end;
                    .rentit{
                        padding-right: 3px;
                    }
                }
                .rentit{
                    font-size: 13px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #8B8B8B;
                    // white-space: nowrap;
                    // overflow: hidden;
                    // text-overflow: ellipsis;
                    display: inline-block;
                }
                .copy{
                    width: 10px;
                    height: 10px;
                    margin-left: 4px;
                }
                .hong{
                    font-weight: 400;
                    color: #EF5252 !important;
                }
                .usdticon{
                    width: 14px;
                    height: 14px;
                    margin-right: 5px;
                }
                .center{
                    align-items: center;
                }
                .shuhui{
                    width: 47px;
                    height: 23px;
                    border: 1px solid #030000;
                    border-radius: 12px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 9px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #000000;
                }
                .lv{
                    color: #31BD65 !important;
                }
            }
            .ztitems{
                display: flex;
                flex-direction: row;
                align-items: center;
                .rentit{
                    font-size: 14px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #000000;
                }
                .end{
                    justify-content: flex-end;
                    .rentit{
                        padding-right: 0px;
                    }
                }
            }
            .ztitems:last-child{
                border-bottom: none;
            }
        }
    }
}
.xiaclass{
    position: relative;
    top: 4px !important;
}

// 提币弹窗
.popone{
    display: flex;
    flex-direction: column;
    // .el-dialog__header {
    //     padding: 0;
    // }
    .pophead{
        display: flex;
        flex-direction: row;
        align-items: center;
        .gantan{
            width: 17px;
            height: 17px;
            margin-right: 5px;
        }
        .pname{
            font-size: 15px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #000000;
           
        }
        .gou{
            width: 14px;
            height: 14px;
            margin-right: 5px;
            cursor: pointer;
        }
        .tixing{
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #010101;
            cursor: pointer;
        }
    }
    .wuname{
        font-size: 15px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #010101;
        display: block;
        margin: 35px 0 20px;
    }
    .zhixiao{
        height: 45px;
        background: #000000;
        border-radius: 22px;
        margin-top: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #FFFFFF;
        cursor: pointer;
    }
}

// 提币弹窗结束
</style>
<style>
.dialogClass .el-dialog__header {
    padding: 0;
}
</style>